<script setup>
import { onMounted, onUnmounted } from 'vue'
import { useUserStore } from './stores/user'
import { useCartStore } from './stores/cart'
import { useActivityStore } from './stores/activity'
import { useToastStore } from '@/stores/toast'
import { useRouter } from 'vue-router'
import Toast from '@/components/Toast.vue'

const userStore = useUserStore()
const cartStore = useCartStore()
const activityStore = useActivityStore()
const toast = useToastStore()
const router = useRouter()

// 初始化应用
onMounted(() => {
  userStore.initUser()
  activityStore.initActivity()
  cartStore.initCart()

  const onApiError = (e) => {
    const { message } = e.detail || { message: '请求失败' }
    toast.error(message)
  }
  const onAuthRequired = (e) => {
    const { message } = e.detail || { message: '登录已过期，请重新登录' }
    toast.warning(message)
    const currentPath = router.currentRoute.value.fullPath || '/'
    router.push({ path: '/login', query: { redirect: currentPath } })
  }
  window.addEventListener('api-error', onApiError)
  window.addEventListener('auth-required', onAuthRequired)

  onUnmounted(() => {
    window.removeEventListener('api-error', onApiError)
    window.removeEventListener('auth-required', onAuthRequired)
  })
})
</script>

<template>
  <div id="app">
    <!-- 导航栏 -->
    <nav class="navbar">
      <div class="container">
        <div class="navbar__content">
          <!-- Logo -->
          <RouterLink to="/" class="navbar__logo">
            🎭 娱乐票务系统
          </RouterLink>
          
          <!-- 导航菜单 -->
          <div class="navbar__menu">
            <RouterLink to="/" class="navbar__link">首页</RouterLink>
            <RouterLink to="/events" class="navbar__link">演出</RouterLink>
            <RouterLink to="/cart" class="navbar__link">
              购物车
              <span v-if="cartStore.totalItems > 0" class="badge">
                {{ cartStore.totalItems }}
              </span>
            </RouterLink>
            
            <!-- 用户菜单 -->
            <div v-if="userStore.isLoggedIn" class="navbar__user">
              <RouterLink to="/orders" class="navbar__link">我的订单</RouterLink>
              <RouterLink to="/profile" class="navbar__link">个人中心</RouterLink>
              <button @click="userStore.logout" class="btn btn--secondary btn--small">
                退出登录
              </button>
            </div>
            <div v-else class="navbar__auth">
              <RouterLink to="/login" class="btn btn--secondary btn--small">登录</RouterLink>
              <RouterLink to="/register" class="btn btn--primary btn--small">注册</RouterLink>
            </div>
          </div>
        </div>
      </div>
    </nav>
    
    <!-- 主要内容区域 -->
    <main class="main-content">
      <RouterView />
    </main>

    <!-- 全局提示 -->
    <Toast />
    
    <!-- 页脚 -->
    <footer class="footer">
      <div class="container">
        <div class="footer__content">
          <p>&copy; 2024 娱乐票务系统. 保留所有权利.</p>
          <p>基于 Vue3 + SpringBoot 的全栈学习项目</p>
        </div>
      </div>
    </footer>
  </div>
</template>

<style lang="scss" scoped>
@use '@/assets/styles/variables' as *;

#app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.navbar {
  background-color: $bg-primary;
  box-shadow: $shadow-light;
  position: sticky;
  top: 0;
  z-index: $z-index-sticky;
  
  &__content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 64px;
  }
  
  &__logo {
    font-size: $font-size-xl;
    font-weight: $font-weight-bold;
    color: $primary-color;
    text-decoration: none;
    
    &:hover {
      color: $primary-dark;
    }
  }
  
  &__menu {
    display: flex;
    align-items: center;
    gap: $spacing-lg;
  }
  
  &__link {
    position: relative;
    color: $text-primary;
    font-weight: $font-weight-medium;
    padding: $spacing-sm 0;
    transition: color $transition-fast;
    
    &:hover {
      color: $primary-color;
    }
    
    &.router-link-active {
      color: $primary-color;
      
      &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 2px;
        background-color: $primary-color;
      }
    }
  }
  
  &__user,
  &__auth {
    display: flex;
    align-items: center;
    gap: $spacing-md;
  }
}

.badge {
  background-color: $error-color;
  color: white;
  font-size: $font-size-xs;
  padding: 2px 6px;
  border-radius: 10px;
  margin-left: $spacing-xs;
}

.main-content {
  flex: 1;
}

.footer {
  background-color: $text-primary;
  color: white;
  padding: $spacing-lg 0;
  margin-top: auto;
  
  &__content {
    text-align: center;
    
    p {
      margin: $spacing-xs 0;
      
      &:first-child {
        font-weight: $font-weight-medium;
      }
      
      &:last-child {
        color: $text-disabled;
        font-size: $font-size-sm;
      }
    }
  }
}

// 响应式设计
@media (max-width: $breakpoint-md) {
  .navbar {
    &__content {
      flex-direction: column;
      height: auto;
      padding: $spacing-sm 0;
    }
    
    &__menu {
      flex-wrap: wrap;
      justify-content: center;
      gap: $spacing-sm;
    }
  }
}
</style>
